<template>
  <div class='wrapper'>
    <h1 class="title">户型(4)</h1>
    <div class="item-wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20181130/02a10b67b4e641fc9dbbce50b058b6be.jpg?x-oss-process=image/resize,w_250"
                alt="">
            </div>
            <div class="item-detailed">
              <h1>3室2厅2卫 <span>在售</span></h1>
              <p class="item-detailed-area">建面108m²| 朝南</p>
              <p class="item-detailed-reference">参考总价：<span>108万</span></p>
              <p class="item-detailed-Floorprice">一键获取底价</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20181130/02a10b67b4e641fc9dbbce50b058b6be.jpg?x-oss-process=image/resize,w_250"
                alt="">
            </div>
            <div class="item-detailed">
              <h1>3室2厅2卫 <span>在售</span></h1>
              <p class="item-detailed-area">建面108m²| 朝南</p>
              <p class="item-detailed-reference">参考总价：<span>108万</span></p>
              <p class="item-detailed-Floorprice">一键获取底价</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20181130/02a10b67b4e641fc9dbbce50b058b6be.jpg?x-oss-process=image/resize,w_250"
                alt="">
            </div>
            <div class="item-detailed">
              <h1>3室2厅2卫 <span>在售</span></h1>
              <p class="item-detailed-area">建面108m²| 朝南</p>
              <p class="item-detailed-reference">参考总价：<span>108万</span></p>
              <p class="item-detailed-Floorprice">一键获取底价</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20181130/02a10b67b4e641fc9dbbce50b058b6be.jpg?x-oss-process=image/resize,w_250"
                alt="">
            </div>
            <div class="item-detailed">
              <h1>3室2厅2卫 <span>在售</span></h1>
              <p class="item-detailed-area">建面108m²| 朝南</p>
              <p class="item-detailed-reference">参考总价：<span>108万</span></p>
              <p class="item-detailed-Floorprice">一键获取底价</p>
            </div>
          </div>
        </swiper-slide><swiper-slide>
        <div class="item">
          <div class="item-img">
            <img
              src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20181130/02a10b67b4e641fc9dbbce50b058b6be.jpg?x-oss-process=image/resize,w_250"
              alt="">
          </div>
          <div class="item-detailed">
            <h1>3室2厅2卫 <span>在售</span></h1>
            <p class="item-detailed-area">建面108m²| 朝南</p>
            <p class="item-detailed-reference">参考总价：<span>108万</span></p>
            <p class="item-detailed-Floorprice">一键获取底价</p>
          </div>
        </div>
      </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DoorModel',
    data () {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          slidesPerView: 2,
          freeMode: false,                  //
          updateOnWindowResize: false,      // 重新计算(update和breakpoints等)
          paginationType: false,            // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                    // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        },
        imgs: [
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
        ],
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .wrapper
    wrapper()
    TopBorder()
    margin-top .6rem

  .title
    font-size .4rem
    font-weight 900
    line-height 1rem

  .item-wrapper
    overflow hidden

  .item
    margin-right .1rem
    display flex
    flex-direction column
    justify-content center
    align-items center
    background-color none

  .item-img
    margin-right .1rem
    display flex
    flex-direction column
    background-color pink


  .item-img img
    img()

  .item-detailed-title
    font-size .3rem
    font-weight 900

  .item-detailed h1
    font-size .32rem
    font-weight 900
    line-height .58rem
    

  .item-detailed h1 span
    lnsale()
    font-size .1rem
    padding .04rem

  .item-detailed-area
    line-height .4rem
    color #798089

  .item-detailed-reference
    line-height .8rem
    color #798089

  .item-detailed-reference span
    color #ff9100
    font-weight bolder

  .item-detailed-Floorprice
    line-height .5rem
    text-align center
    lnsale()

</style>
